﻿<Application x:Class="AnimatedButton.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        
        <LinearGradientBrush x:Key="GrayBlueGradientBrush"
                             StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="DarkGray" Offset="0"/>
            <GradientStop Color="#CCCCFF" Offset="0.5"/>
            <GradientStop Color="DarkGray" Offset="1"/>
        </LinearGradientBrush>
        
        <GradientStopCollection x:Key="GlassGradientStopsCollection">
            <GradientStop Color="WhiteSmoke" Offset="0.2"/>
            <GradientStop Color="Transparent" Offset="0.4"/>
            <GradientStop Color="WhiteSmoke" Offset="0.5"/>
            <GradientStop Color="Transparent" Offset="0.75"/>
            <GradientStop Color="WhiteSmoke" Offset="0.9"/>
            <GradientStop Color="Transparent" Offset="1"/>
        </GradientStopCollection>
        
        <LinearGradientBrush x:Key="GlassBrush" StartPoint="0,0" EndPoint="1,1"
                             Opacity="0.75"
                             GradientStops="{StaticResource GlassGradientStopsCollection}"/>
        
        <Style TargetType="Button">
            <Setter Property="Background" 
                    Value="{StaticResource GrayBlueGradientBrush}"/>
            <Setter Property="Width" Value="90"/>
            <Setter Property="Margin" Value="10"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid Width="{TemplateBinding Width}"
                              Height="{TemplateBinding Height}"
                              ClipToBounds="True">
                            
                            <!-- Outer rectangle with rounded corners -->
                            <Rectangle x:Name="outerRectangle"
                                       HorizontalAlignment="Stretch"
                                       VerticalAlignment="Stretch"
                                       Stroke="{TemplateBinding Background}"
                                       RadiusX="20"
                                       RadiusY="20" 
                                       StrokeThickness="5"
                                       Fill="Transparent"/>

                            <!-- Inner Rectangle with rounded corners. -->
                            <Rectangle x:Name="innerRectangle"  
                                       HorizontalAlignment="Stretch"  
                                       VerticalAlignment="Stretch" Stroke="Transparent"  
                                       StrokeThickness="20"  
                                       Fill="{TemplateBinding Background}"  
                                       RadiusX="20" RadiusY="20"   />

                            <!-- Glass Rectangle -->
                            <Rectangle x:Name="glassCube" HorizontalAlignment="Stretch" 
                                       VerticalAlignment="Stretch" 
                                       StrokeThickness="2" RadiusX="10" RadiusY="10" Opacity="0" 
                                       Fill="{StaticResource GlassBrush}" 
                                       RenderTransformOrigin="0.5,0.5">
                                        <Rectangle.Stroke>
                                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                                <LinearGradientBrush.GradientStops>
                                                    <GradientStop Offset="0.0" Color="LightBlue" />
                                                    <GradientStop Offset="1.0" Color="Gray" />
                                                </LinearGradientBrush.GradientStops>
                                            </LinearGradientBrush>
                                        </Rectangle.Stroke>

                                <!-- These transforms have no effect as they are declared here.  
                                     The reason the transforms are included is to be targets  
                                     for animation (see later). -->
                                    <Rectangle.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform />
                                            <RotateTransform />
                                        </TransformGroup>
                                    </Rectangle.RenderTransform>

                                <!-- A BevelBitmapEffect is applied to give the button a "Beveled" look. -->
                                <Rectangle.BitmapEffect>
                                    <BevelBitmapEffect />
                                </Rectangle.BitmapEffect>
                            </Rectangle>

                            <!-- Present Content (text) of the button. -->
                            <DockPanel Name="myContentPresenterDockPanel">
                                <ContentPresenter x:Name="myContentPresenter" Margin="20"  
                                                  Content="{TemplateBinding  Content}"  
                                                  TextBlock.Foreground="Black" />
                            </DockPanel>

                        </Grid>
                        
                        <ControlTemplate.Triggers>

                            <!-- Set properties when mouse pointer is over the button. -->
                            
                            <Trigger Property="IsMouseOver" Value="True">
                                <!-- Below are three property settings that occur when the  
                                     condition is met (user mouses over button).  -->
                                <!-- Change the color of the outer rectangle when user  
                                     mouses over it. -->

                                <Setter Property ="Rectangle.Stroke" TargetName="outerRectangle" 
                                        Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />


                                <!-- Sets the glass opacity to 1, therefore, the  
                                     glass "appears" when user mouses over it. -->
                                <Setter Property="Rectangle.Opacity" Value="1" TargetName="glassCube" />

                                <!-- Makes the text slightly blurry as though you  
                                     were looking at it through blurry glass. -->
                                <Setter Property="ContentPresenter.BitmapEffect"  
                                        TargetName="myContentPresenter">
                                    <Setter.Value>
                                        <BlurBitmapEffect Radius="1" />
                                    </Setter.Value>
                                </Setter>

                            </Trigger>

                            <!-- Set properties when button has focus. -->
                            <Trigger Property="IsFocused" Value="true">
                                <Setter Property="Rectangle.Opacity" Value="1" TargetName="glassCube" />
                                <Setter Property="Rectangle.Stroke" TargetName="outerRectangle" 
                                        Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
                            </Trigger>

                            <!-- Animations that start when mouse enters and leaves button. -->
                            <EventTrigger RoutedEvent="Mouse.MouseEnter">
                                <EventTrigger.Actions>
                                    <BeginStoryboard Name="mouseEnterBeginStoryboard">
                                        <Storyboard>

                                            <!-- This animation makes the glass rectangle shrink in the X direction. -->
                                            <DoubleAnimation Storyboard.TargetName="glassCube"  
                                                             Storyboard.TargetProperty= 
                                                             "(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" 
                                                             By="-0.1" Duration="0:0:0.5" />

                                            <!-- This animation makes the glass rectangle shrink in the Y direction. -->
                                            <DoubleAnimation Storyboard.TargetName="glassCube"  
                                                             Storyboard.TargetProperty= 
                                                             "(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"  
                                                             By="-0.1" Duration="0:0:0.5" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="Mouse.MouseLeave">
                                <EventTrigger.Actions>
                                    <!-- Stopping the storyboard sets all animated properties back to default. -->
                                    <StopStoryboard BeginStoryboardName="mouseEnterBeginStoryboard" />
                                </EventTrigger.Actions>
                            </EventTrigger>

                            <!-- Animation fires when button is clicked, causing glass to spin.  -->
                            <EventTrigger RoutedEvent="Button.Click">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="glassCube"  
                                                             Storyboard.TargetProperty= 
                                                             "(Rectangle.RenderTransform).(TransformGroup.Children)[1].(RotateTransform.Angle)"  
                                                             By="360" Duration="0:0:0.5" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>

                        </ControlTemplate.Triggers>
                        
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
</Application>
